<template>
  <div class="operationPageWrap">
  <div class="pageTableInner">
    <div class="infoSearchWrap">
      <div class="infoSearchOne">
        <el-row :gutter="20">
          <el-col :span="5">
            <div class="searchWrap">
              <span class="searchFont">企业:</span>
              <span class="searchInputFont">
                <el-select  v-model="searchInfo.enterpriseNo" size="mini" @change="searchRowsInfo" clearable placeholder="全部">
                      <el-option
                        v-for="item in this.$store.state.companyInfos"
                        :key="item.enterpriseNo+''"
                        :label="item.enterpriseName"
                        :value="item.enterpriseNo+''">
                      </el-option>
                    </el-select>
                </span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="searchWrap">
              <span class="searchFont">行政区域:</span>
              <span class="searchInputFont" style="width: 38%;">
                  <el-select v-model="searchInfo.districtId" @change="changeDistrict(searchInfo.districtId)" size="mini"
                             :disabled="$store.state.userInfo.regionId?true:false"  clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
                <span class="searchInputFont" style="width: 38%;">
                    <el-select v-model="searchInfo.streetId" @change="searchRowsInfo" size="mini" clearable placeholder="街道">
                      <el-option
                        v-for="item in streetData"
                        :key="item.id"
                        :label="item.regionName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                 </span>
            </div>
          </el-col>
          <!--<div style="float: right;margin-right: 10px;">
            <el-button type="primary" size="mini" @click="searchRowsInfo()">查询</el-button>

          </div>-->

        </el-row>
      </div>
    </div>
    <div class="tableContainer">
      <div class="tableInner" ref="tableInner">
        <el-table
          ref="multipleTable"
          :data="rows"
          stripe
          :height="tableHeight"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            label="行政区"
            prop="districtName"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{scope.row.districtName?scope.row.districtName:"全市"}}
            </template>
          </el-table-column>
          <el-table-column
            label="街道办"
            prop="streetName"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="企业"
            prop="enterpriseName"
          >
          </el-table-column>
          <el-table-column
            label="运维人员"
            prop="userName"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="联系方式"
            prop="mobile"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
      <div  style="text-align: left;margin-top: 15px;">
        <el-row :gutter="10">
          <el-col :span="13" :offset="9">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchInfo.page"
              :page-sizes="[10, 30, 50, 100,200]"
              :page-size="searchInfo.rows"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count">
            </el-pagination>
          </el-col>
        </el-row>
      </div>

    </div>
  </div>
  </div>
</template>

<script>

  export default {
    props: [],
    data(){
      return {
        rows: [],
        count: 0,
        tableHeight: 400,
        searchInfo: {
          streetId: "",
          districtId:this.$store.state.userInfo.regionId,
          enterpriseNo: "",
          page: 1,
          rows: 10,
        },
        streetData: [],
      }
    },
    components: {},
    created(){
      this.searchRowsInfo()

    },
    mounted(){
      setTimeout(()=>{
        if(this.$store.state.userInfo.regionId){this.changeDistrict(this.searchInfo.districtId)}
      },500)
      this.$nextTick(()=>{
        //表格滚动
        this.tableHeight=document.querySelector(".operationPageWrap").clientHeight-160
      })
    },

    methods: {
      //获取街道
      changeDistrict(district){
        this.searchRowsInfo()
        if(!district){
          this.searchInfo.streetId=""
          this.streetData=[]
          return
        }
        this.axios.post(process.env.API_HOST + '/common/selectRegion' ,{parentId:district})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.streetData = result.result
            }
          })
      },

      handleSizeChange(val) {
        this.searchInfo.rows = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.searchInfo.page = val;
        this.searchRowsInfo(val)

      },
      //获取所有信息
      searchRowsInfo(val){
        val?"":this.searchInfo.page=1
        this.axios.post(process.env.API_HOST + `/enterprise/selectOperatorGrid`, this.searchInfo)
          .then(response => {
            const result = response.data
            if(result.code==200){
              this.rows = result.rows
              this.count = result.total;
            }
          })
      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .operationPageWrap
    page()

</style>
